<template>
  <div class="container-layer-photo">
    <van-grid :border="false" :column-num="3" :gutter="10">
      <van-grid-item v-for="(value, index) in computPhotoList" :key="index" @click="checkImage(index)">
        <van-image
          :src=" value.image_adr"
          fit="cover"
          width="100%"
          height="100"
        />
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
// api
import { getPhoto } from '@/api/photo'
// vuex
import { mapGetters } from 'vuex'
import { ImagePreview } from 'vant'
export default {
  data() {
    return {
      photoList: []
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    computPhotoList() {
      return this.photoList
    }
  },
  async created() {
    const { id = null } = this.$route.params
    // 验证id
    if (!id) return this.$router.replace('/')
    // 获取相册
    const res = await getPhoto({ id })
    this.photoList = res.data || []
  },
  methods: {
    checkImage(index) {
      const images = []
      for (let i = 0; i < this.photoList.length; i++) {
        images.push(this.photoList[i].image_adr)
      }
      ImagePreview({ images, startPosition: index })
    }
  }
}
</script>

<style lang="less" scoped>
.container-save-btn {
  width: 100%;
  padding: 10px;
  position: fixed;
  bottom: 0;
  text-align: center;
  background-color: #f45050;
  color: #fff;
}
.container-select {
    position: absolute;
    right: 5px;
    top: 5px;
}
</style>
